<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>table_demo</title>
  <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
  <style>
    body {
      margin: 10px;
    }

    .demo-carousel {
      height: 200px;
      line-height: 200px;
      text-align: center;
    }
  </style>
</head>

<body>

  <form class="layui-form" action="">

    <!-- 单个输入s -->
    <div class="input_wrap" style="margin-top:10px;"> 
        <label class="layui-form-label">单行输入框</label>
        <div class="layui-input-block">
          <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input" style="width:60%">
        </div>
    </div>
   
    <!-- 单个输入e -->

    <!-- 验证s -->
    <div class="input_wrap" style="margin-top:10px;"> 
        <label class="layui-form-label">验证必填项</label>
        <div class="layui-input-block">
          <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" style="width:60%">
        </div>
    </div>
    <!-- 验证e -->

    <!-- 一行2个 s -->
    <div class="layui-form-item" style="margin-top:10px;">
      <div class="layui-inline">
        <label class="layui-form-label">验证手机</label>
        <div class="layui-input-inline">
          <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-inline">
        <label class="layui-form-label">验证邮箱</label>
        <div class="layui-input-inline">
          <input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
        </div>
      </div>
    </div>
    <!-- 一行2个 e -->

    <!-- select s -->
    <div class="layui-inline">
        <label class="layui-form-label">分组选择框</label>
        <div class="layui-input-inline">
          <select name="quiz">
            <option value="">请选择问题</option>
            <optgroup label="城市记忆">
              <option value="你工作的第一个城市">你工作的第一个城市</option>
            </optgroup>
            <optgroup label="学生时代">
              <option value="你的工号">你的工号</option>
              <option value="你最喜欢的老师">你最喜欢的老师</option>
            </optgroup>
          </select>
        </div>
      </div>
    <!-- select e -->

    <!-- select 联动 s-->


    <!-- select 联动 e-->
    <div class="layui-form-item" style="margin-left:30px;margin-top:20px;">
      <button class="layui-btn" lay-submit="" lay-filter="demo2">跳转式提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>

  </form>

  <table class="layui-hide" id="test" lay-filter="demo"></table>

  <script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  </script>
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="../../layuiadmin/layui/layui.js"></script>



  <div class="layui-tab-item">
    <div id="pageDemo"></div>
  </div>

  <script>
    var log = console.log;
    log(new Date);
    log("test");
   
    
    layui.config({
      base: '../../layuiadmin/', //静态资源所在路径
      version: '1522709297490' //为了更新 js 缓存，可忽略
    }).extend({
      index: './lib/index', //主入口模块，
      GD_common: "../modules/GD_common",
      GD_layer: "../modules/GD_layer",
    }).use(["index", "table", 'laydate', 'GD_layer', "form","layer"], function () {

      var layer = layui.layer //弹层
        , table = layui.table //表格
        , element = layui.element //元素操作
        , form = layui.form
       
        layer.msg('查看操作');
      //自定义验证规则
      form.verify({
        title: function (value) {
          if (value.length < 5) {
            return '标题至少得5个字符啊';
          }
        }
        , pass: [/(.+){6,12}$/, '密码必须6到12位']
        , content: function (value) {
          layedit.sync(editIndex);
        }
      });

      //监听提交
      form.on('submit(demo1)', function (data) {
        layer.alert(JSON.stringify(data.field), {
          title: '最终的提交信息'
        })
        return false;
      });

      //执行一个 table 实例
      table.render({
        elem: '#test'
        , height: 332
        , url: '../../json/table.json' //数据接口
        , page: true //开启分页
        , cols: [[ //表头
          { field: 'id', title: 'ID', minWidth: 80, sort: true, fixed: 'left' }
          , { field: 'username', title: '用户名', minWidth: 80 }
          , { field: 'sex', title: '性别', minWidth: 80, sort: true }
          , { field: 'city', title: '城市', minWidth: 80 }
          , { field: 'sign', title: '签名', minWidth: 80 }
          , { field: 'experience', title: '积分', minWidth: 80, sort: true }
          , { field: 'score', title: '评分', minWidth: 80, sort: true }
          , { field: 'classify', title: '职业', minWidth: 80 }
          , { field: 'wealth', title: '财富', minWidth: 80, sort: true }
          , {
            fixed: 'right', minWidth: 180, align: 'center',
            toolbar: '#barDemo'
          }
        ]]
      });

      //监听工具条
      table.on('tool(demo)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
        var data = obj.data //获得当前行数据
          , layEvent = obj.event; //获得 lay-event 对应的值
        if (layEvent === 'detail') {
          
          layer.msg('查看操作');

        } else if (layEvent === 'del') {

          layer.confirm('真的删除行么', function (index) {
            obj.del(); //删除对应行（tr）的DOM结构
            layer.close(index);
            //向服务端发送删除指令
          });

        } else if (layEvent === 'edit') {
          layer.msg('编辑操作');

        }
      });

    });
  </script>
</body>

</html>